<template>
	<d2-container>
		<template slot="header">
			<el-form class="header-area" ref="indexForm" :model="indexForm" label-width="100px" style="height: auto">
				<el-row>
					<el-col :span="5" v-if="shopId == 0">
						<el-form-item label="选择门店" prop="shopId">
							<el-select v-model="indexForm.shopId" placeholder="请选择" style="width: 100%;">
								<el-option value="10" label="科德店">科德店</el-option>
								<el-option value="11" label="江南万达店">江南万达店</el-option>
								<el-option value="12" label="秀灵店">秀灵店</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="indexForm.payType" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="账户支付" value="1"></el-option>
								<el-option label="现金支付" value="2"></el-option>
								<el-option label="通联支付" value="3"></el-option>
								<el-option label="支付宝记账" value="4"></el-option>
								<el-option label="微信记账" value="5"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="选择月份" prop="month">
							<el-date-picker v-model="indexForm.month" type="month" value-format="timestamp" placeholder="选择月份" @change="chooseMonth" style="width: 100%"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<div class="search-submit">
							<el-button type="primary" size="medium" loading v-if="loading">查询</el-button>
							<el-button type="primary" size="medium" @click="submitForm('indexForm')" v-else>查询</el-button>

							<el-button type="primary" plain size="medium" @click="resetForm('indexForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>

		<template>
			<el-table stripe border :data="tableData" style="width: 100%">
				<el-table-column label="月份" align="center" width="120">
					<template>{{month}}</template>
				</el-table-column>
				<el-table-column label="支付方式" align="center">
					<template v-if="indexForm.payType == 3">通联支付</template>
					<template v-else-if="indexForm.payType == 2">现金支付</template>
					<template v-else-if="indexForm.payType == 1">账户支付</template>
					<template v-else>全部</template>
				</el-table-column>
				<el-table-column prop="orderCount" label="付款订单数" align="center"></el-table-column>
				<el-table-column prop="incomeAmount" label="总营收(核销+实付-退款-找零)" align="center">
					<template slot-scope="scope">
						{{ scope.row.incomeAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="thirdPaidAmount" label="第三方核销金额" align="center">
					<template slot-scope="scope">
						{{ scope.row.thirdPaidAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="shopIncomeAmount" label="实收(实付-退款-找零)" align="center">
					<template slot-scope="scope">
						{{ scope.row.shopIncomeAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="payAmount" label="用户实付金额" align="center">
					<template slot-scope="scope">
						{{ scope.row.payAmount | moneyFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="refundAmount" label="店铺退款金额" align="center">
					<template slot-scope="scope">
						{{ scope.row.refundAmount | moneyFilter }}
					</template>
				</el-table-column>
			</el-table>
		</template>
	</d2-container>
</template>
<script>
import { findCurrentMonthRevenueList } from '@api/restaurant/tempReport'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
export default {
  name: 'tempReport-currentMonthRevenue',
  components: {},
  data () {
    return {
      indexForm: {
        shopId: '0',
        payType: '',
        month: dayjs()
      },
	  month: dayjs().format('YYYY-MM'),
	  startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
	  endTime: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),

      tableData: [],
	  loading: false
    }
  },
  computed: {
	  ...mapState('d2admin/permission', ['shopId'])
  },
  filters: {
	  moneyFilter (value) {
		  if (value == '' || value == null || value == undefined) {
		  	return '0.00'
		  } else if (value == 0) {
		  	return '0.00'
		  } else {
		  	let newVal = parseFloat(value)
		  	if (newVal < 0) {
		  		value = (-1 * parseFloat((value + '').replace(/[^\d\.-]/g, ''))).toFixed(2) + ''
		  	} else {
		  		value = parseFloat((value + '').replace(/[^\d\.-]/g, '')).toFixed(2) + ''
		  	}

		  	let left = value.split('.')[0].split('').reverse()
		  	let right = value.split('.')[1]

		  	let t = ''
		  	for (let i = 0; i < left.length; i++) {
		  		t += left[i] + ((i + 1) % 3 === 0 && (i + 1) !== left.length ? ',' : '')
		  	}

		  	if (newVal < 0) {
		  		return '-' + t.split('').reverse().join('') + '.' + right
		  	} else {
		  		return t.split('').reverse().join('') + '.' + right
		  	}
		  }
	  }
  },

  mounted () {
    this.indexForm.shopId = this.shopId == 0 ? '10' : this.shopId.toString()
    this.fetchData()
  },
  methods: {
    fetchData () {
      if (this.loading) {
        return
      }
      this.loading = true

      findCurrentMonthRevenueList({
        shopId: this.indexForm.shopId,
        payType: this.indexForm.payType,
        startTime: this.startTime,
        endTime: this.endTime
      })
        .then(res => {
          this.month = dayjs(this.indexForm.month).format('YYYY-MM'),
          this.tableData = []
          this.tableData.push(res.data)
          this.loading = false
        })
        .catch(err => {
          console.log('err', err)
          this.loading = false
        })
    },

    chooseMonth (val) {
	  this.startTime = dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	  this.endTime = dayjs(val).endOf('month').format('YYYY-MM-DD HH:mm:ss')
    },
    submitForm (formName) {
      this.fetchData()
    },
    resetForm () {
      // this.$refs[formName].resetFields()
      this.indexForm.shopId = this.shopId == 0 ? '10' : this.shopId.toString()
	  this.indexForm.payType = ''
	  this.indexForm.month = dayjs()
      this.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss')
      this.endTime = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss')

      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式请务必加scoped
</style>
